<template>
	<view class="my-settle-container">
		<!-- 全选区域 -->
		<label class="radio" @click="changeAllState">
			<radio :checked="isFullCheck" color="#C00000" /><text></text>
		</label>

		<!-- 合计区域 -->
		<view class="amput-box">
			合计： <text class="amout">￥{{checkedGoodsPrice}}</text>
		</view>

		<!-- 结算区域 -->
		<view class="btn-settle" @click="settlement">结算({{checkedCount}})</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	export default {
		name: "my-settle",
		data() {
			return {

			};
		},

		computed: {
			...mapGetters('myCart', ['checkedCount', 'total', 'checkedGoodsPrice']),

			// 是否全选
			isFullCheck() {
				// 判断购物车中的商品数量和选中的商品数量是否相等，相等就全选
				return this.total === this.checkedCount
			}
		},
		methods: {
			...mapMutations('myCart', ['updateAllGoodsState']),
			// 修改购物车中所有商品的全选状态
			changeAllState() {
				// 如果为false的话,没全选，没全选的话，点击取反就全选了
				this.updateAllGoodsState(!this.isFullCheck)
			},
			// 点击结算按钮
			settlement() {
				console.log(ghj);
				// 是否选择了要结算的商品
				// if (!this.checkedCount) return uni.$showMsg('请选择要结算商品')

				// // 判断用户是否选择了用户地址
				// if (!this.addstr) return uni.$showMsg('请选择收货地址')
				// // 判断用户是否登录
				// if (!this.token) return this.delayNavigate()

			},
			showTips(n) {
				uni.showToast({
					icon: 'none',
					title: `请登录后结算！${n}秒后自动跳转到登录页面`,
					mask: true,
					duration: 1500,
				})
			},
			delayNavigate() {
				this.second = 3
				this.showTips(this.seconds)
				this.timer = setInterval(() => {
					this.second--
					if (this.second <= 0) {
						clearInterval(this.timer)
						uni.switchTab({
							uni: '/pages/my/my',
							success: () => {
								this.updateRedirectInfo({
									openType: 'switchTab',
									from: '/pages/cart/cart'
								})
							}
						})
						return
					}
					this.showTips(this.second)
				}, 1000)
			}
		}
	}
</script>

<style lang="scss">
	.my-settle-container {
		position: fixed;
		bottom: 50px;
		left: 0;
		width: 100%;
		height: 50px;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 14px;
		padding-left: 5px;

		.radio {
			display: flex;
			align-items: center;
		}

		.amout {
			color: #00557f;
		}

		.btn-settle {
			height: 50px;
			min-width: 100px;
			background-color: #00557f;
			color: #fff;
			line-height: 50px;
			text-align: center;
			padding: 0 10px;
		}


	}
</style>